<template>
  <div class="page-header">
    <div class="left-back" v-if="showBack" @click="$router.back()">
      <span class="iconfont icon-zuo"></span>
      返回
    </div>
    <span class="title-text">{{ title }}</span>
    <div class="right-menu">
      <span v-if="$store.state.token" @click="logout">退出</span>
      <span
        v-else
        class="iconfont icon-user"
        @click="$router.push({ name: 'login' })"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
defineProps({
  showBack: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "软帝食堂",
  },
});
const logout = () => {
  store.commit("logOut");
  router.push({ name: "login" });
};
</script>

<style lang="scss" scoped>
.page-header {
  @include flexbox(row, center, center);
  height: 45px;
  background-color: $primaryColor;
  color: white;
  position: relative;
  .title-text {
    font-size: 18px;
    font-weight: bold;
  }
  .left-back {
    position: absolute;
    left: 10px;
    @include flexbox(row, center, center);
  }
  .right-menu {
    @extend .left-back;
    left: unset;
    right: 10px;
  }
}
</style>